<%@ tag pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="promotion" uri="http://com.primus.promotion/tag/core" %>
<%@ taglib prefix="pbase" tagdir="/WEB-INF/tags/base" %>
<%@ attribute name="promotionId" required="true" type="java.lang.Long" %>
<%@ attribute name="promotionCouponUrl" required="true" type="java.lang.String" %>
<pbase:row layout="single">
    <label class="col-sm-2 control-label no-padding-right">选择赠品优惠券</label>
    <div class="col-sm-10 form-group">
        <div class="col-xs-12">
            <div class="row col-xs-12"><span id="_icon_plus_coupon" class="label"><i
                    class="ace-icon glyphicon glyphicon-plus"></i></span></div>
            <div class="row col-xs-12">
                <table id="_coupon_table" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>优惠券名称</th>
                        <th>赠送数量</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</pbase:row>

<script>
    $(function () {
        var $table_body = $('#_coupon_table').find('tbody');
        var all_coupons = [], promotion_gift_coupon_ids = [];

        $.ajax({
            cache: true,
            async: false,
            url: 'management/purchaseGiftPromotion/allCoupons.do',
            type: 'get',
            dataType: 'json'
        }).success(function (data) {
            for (var d in data) {
                all_coupons.push(data[d]);
                promotion_gift_coupon_ids.push(data[d].id);
            }
        });
        <c:if test="${promotionId != null && promotionId > 0}">
        console.log(${promotionId});
        $.ajax({
            cache: true,
            async: false,
            url: '${promotionCouponUrl}',
            type: 'get',
            dataType: 'json'
        }).success(function (data) {
            var append_html = [];
            var coupon_select_html_start = '<select>';
            var coupon_select_html_end = '</select>';
            for (var d in data) {
                append_html.push('<tr>');
                append_html.push('<td class="id hidden">' + data[d].id + '</td>');
                append_html.push('<td class="name">');
                var select_html = [];
                select_html.push(coupon_select_html_start);
                var selected_index = promotion_gift_coupon_ids.indexOf(data[d].id);
                for (var i = 0; i < all_coupons.length; i++) {
                    var coupon = all_coupons[i];
                    var option_html;
                    if (selected_index === i) {
                        option_html = '<option value="'
                            + coupon.id
                            + '" selected>'
                            + coupon.name
                            + '</option>';
                    } else {
                        option_html = '<option value=">'
                            + coupon.id
                            + '">'
                            + coupon.name
                            + '</option>';
                    }
                    select_html.push(option_html);
                }
                select_html.push(coupon_select_html_end);
                append_html.push(select_html.join('\n'));
                append_html.push('</td>');
                append_html.push('<td class="quantity">');
                append_html.push('<input type="number" placeholder="数量" value="'
                    + data[d].quantity
                    + '" />');
                append_html.push('</td>');
                append_html.push('<td><span class="btn btn-xs btn-info coupon_remove"><i class="ace-icon glyphicon glyphicon-remove"></i></span></td>')
                append_html.push('</tr>');
            }
            $table_body.append(append_html.join("\n"));
        });
        </c:if>

        $('#_icon_plus_coupon').click(function () {
            var append_html = [];
            var coupon_select_html_start = '<select>';
            var coupon_select_html_end = '</select>';
            append_html.push('<tr>');
            append_html.push('<td>');
            append_html.push(coupon_select_html_start);
            for (var i = 0; i < all_coupons.length; i++) {
                append_html.push('<option value="' + all_coupons[i].id + '">' + all_coupons[i].name + '</option>');
            }
            append_html.push(coupon_select_html_end);
            append_html.push('</td>');
            append_html.push('<td>');
            append_html.push('<input type="number" class="quantity" placeholder="数量"/></td>');
            append_html.push('<td><span class="btn btn-xs btn-info coupon_remove"><i class="ace-icon glyphicon glyphicon-remove"></i></span></td>')
            append_html.push('</tr>');
            $table_body.append(append_html.join("\n"));
        });

        $table_body.on('click', '.coupon_remove', function () {
            $(this).parents("tr").remove();
        });
    });
</script>

